<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>转账记录</title>
<link rel="stylesheet" href="/acct/css/bootstrap.min.css">
<script src="/acct/js/jquery.js" type="text/javascript"></script>
<script src="/acct/js/bootstrap.min.js" type="text/javascript"></script>
<style>
	#statu{
		height: 40px;
	    margin-top: 5px;
	    border: none;
	}
	h2{
	    position: fixed;
	    z-index: 1;
	    opacity: 0.5;
	    margin-left: 45%;
	    margin-top: 15px;
	    top: 0;
	}
	th{
		width: 20%;
	}
</style>
</head>
<body>
<h2  align="center">转账记录</h2>
<div class="container-fluid" style="width: 60%;    margin-top: 5%;">

  <div class="row">
   <a class="btn btn-default" href="/acct/main" role="button" style="    margin-bottom: 10px;">回到首页</a>
  		<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">${userName }的转账记录</a>
    </div>

      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
         
          <select id="statu">
		  <option value ="0">所有转账记录</option>
		  <option value ="1">转出记录</option>
		  <option value="2">转入记录</option>
		</select>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
		<table class="table table-hover">
		 	<thead>
			    <tr>
			        <th>转账方账号</th>
			        <th>收账方账号</th>
			        <th style="width: 10%;">转账金额</th>
			        <th>转账日期</th>
			        <th>转账描述</th>
			    </tr>
		    </thead>
		    <tbody id="transHistory">
		    	
		    </tbody>
		</table>
  </div>
</div>
</body>
<script type="text/javascript">
	var trueDate=null;
	$(document).ready(function(){ 
		$('.dropdown-toggle').dropdown();
		getTranHistory();
		
	}); 
	 $("#statu").change(function(i) { 
		 var selectValue = $("#statu").val();
		 SelectChange(selectValue);
     });
	//更改转账还是转出
	function SelectChange(i){
		$('#transHistory').empty();
		$.ajax({
		    type: "Get",
		    url: "/acct/queryTranHistory?ClientNo="+${acct_no}+"&statu="+i,
		    dataType: "json",
		    success: function(data){
		    	var item=data.data;
		    	$.each(item,function(i){
		    		toDate(item[i].date);
		    		$('#transHistory').append("<tr><td>"+item[i].a_acct_no+"</td>"
		    				+"<td>"+item[i].b_acct_no+"</td>"
		    				+"<td>"+item[i].salary+"</td>"
		    				+"<td>"+trueDate+"</td>"
		    				+"<td>"+item[i].result+"</td></tr>")
		    		
		    	});
		    }
		});
	}
	function getTranHistory(clientno){
		$.ajax({
		    type: "Get",
		    url: "/acct/queryTranHistory?ClientNo="+${acct_no}+"&statu=0",
		    dataType: "json",
		    success: function(data){
		    	var item=data.data;
		    	$.each(item,function(i){
		    		toDate(item[i].date);
		    		$('#transHistory').append("<tr><td>"+item[i].a_acct_no+"</td>"
		    				+"<td>"+item[i].b_acct_no+"</td>"
		    				+"<td>"+item[i].salary+"</td>"
		    				+"<td>"+trueDate+"</td>"
		    				+"<td>"+item[i].result+"</td></tr>")
		    		
		    	});
		    }
		});
	}
	//时间戳转时间格式
	function toDate(date){
		var date = new Date(date);
		Y = date.getFullYear() + '-';
		M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		D = date.getDate() + ' ';
		h = date.getHours() + ':';
		m = date.getMinutes() + ':';
		s = date.getSeconds(); 
		trueDate=Y+M+D+h+m+s;
	}
</script>
</html>